<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.125.0/Widgets/widgets.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.125.0/Cesium.js"></script>
    <title>Document</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="map"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    const viewer = new Cesium.Viewer("map", {})
    $(() => {
        $.ajax({
            url: "laixi.geojson",
            success: function (data) {
                const maskpointArray = [];
                const arr = data.features[0].geometry.coordinates[0][0];
                for (let i = 0, l = arr.length; i < l; i++) {
                    maskpointArray.push(arr[i][0]);
                    maskpointArray.push(arr[i][1]);
                }
                var maskspoint = Cesium.Cartesian3.fromDegreesArray(maskpointArray);
                console.log(maskspoint)
                const area = viewer.entities.add({
                    id: 1,
                    polygon: {
                        hierarchy: {
                            // 定义多边形的环区域
                            positions: Cesium.Cartesian3.fromDegreesArray([
                                100, 0, 100, 89, 160, 89, 160, 0,
                            ]),
                            // 定义多边形的孔
                            holes: [
                                {
                                    positions: maskspoint,
                                },
                            ],
                        },
                        material: Cesium.Color.BLACK.withAlpha(1), //外部颜色
                    },
                });
                viewer.flyTo(area);
            }
        })
    })
</script>
</body>
</html>